﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跟随鼠标的旋转背景</title>
    
</head>
<body>
看见那个旋转的椭圆了吗？
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
    <div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>
    <div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>
    <div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>
    <div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>
    <div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>
    <div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>
    <div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>
    <div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>
</div>

<script LANGUAGE="JavaScript">
    var Clrs = new Array(6);                         //随机的背景颜色，保存在一个数组中
    Clrs[0] = 'ff0000';
    Clrs[1] = '00ff00';
    Clrs[2] = '000aff';
    Clrs[3] = 'ff00ff';
    Clrs[4] = 'fff000';
    Clrs[5] = 'fffff0';
    var yBase = 200;
    var xBase = 200;
    var step;
    var currStep = 0;
    var Xpos = 1;                                      //横坐标变量
    var Ypos = 1;                                      //纵坐标变量
    if (document.all) {
        function MoveHandler()
        {
            Xpos = document.body.scrollLeft+event.x;   //设置横坐标
            Ypos = document.body.scrollTop+event.y;    //设置纵坐标
        }
        document.onmousemove = MoveHandler;            //绑定鼠标的移动事件
    }
    function Comet()
    {
        if (document.all) {
            yBase = window.document.body.offsetHeight / 4;
            xBase = window.document.body.offsetWidth / 4;
        }
        if (document.all) {
            for ( i = 0 ; i < starsDiv.all.length ; i++ ) {    //循环设置每个div的显示位置
                step = 3;
                starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
                starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
                for (ai = 0; ai < Clrs.length; ai++) {
                    var c=Math.round(Math.random()*[ai]);              //获取随机的一个颜色值
                }
                starsDiv.all[i].style.background = Clrs[c];        //动态设置div的背景色
            }
        }
        currStep += step;
        setTimeout("Comet()", 5);                          //设置定时器-实现旋转效果
    }
    Comet();
</script>
</body>
</html>